<template>
  <el-card>

    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path:'/welcome'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>预约地点管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row :gutter="12">
      <el-col :span="6">
        <el-input clearable @clear="listPage" v-model="address" placeholder="请输入预约人名称查询"></el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" icon="el-icon-search" @click="listPage">查询</el-button>
        <el-button type="success" icon="el-icon-plus" @click="openAddDialog">预约</el-button>
      </el-col>
    </el-row>

    <el-table :data="tableData">
      <el-table-column prop="username" label="姓名"></el-table-column>
      <el-table-column prop="address" label="预约地点"></el-table-column>
      <el-table-column prop="avcname" label="疫苗名称"></el-table-column>
      <el-table-column prop="money" label="费用"></el-table-column>
      <el-table-column prop="appstats" label="预约状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.appstats==0" type="success">已预约</el-tag>
          <el-tag v-else-if="scope.row.appstats==1" type="danger">已取消</el-tag>
          <el-tag v-else type="warning">未知</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="apptime" label="预约时间"></el-table-column>
      <el-table-column prop="stats" label="是否接种">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.stats==0" type="danger">未接种</el-tag>
          <el-tag v-else-if="scope.row.stats==1" type="success">已接种</el-tag>
          <el-tag v-else type="warning">未知</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="接种时间">
        <template slot-scope="scope">
          {{scope.row.mtime}}
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">

            <el-button v-if="scope.row.stats==0" type="success"  @click="update(scope.row)">点击确定接种</el-button>

        </template>
      </el-table-column>
    </el-table>

    <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page.sync="pager.page"
    :page-size="pager.size"
    :page-sizes="[5, 10, 15, 20]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="pager.total"
    ></el-pagination>

   <el-dialog :visible.sync="addFlag" title="添加预约信息" :close-on-click-modal="false">
      <el-form>
        <el-form-item>
         <el-select v-model="appointment.addid" filterable placeholder="请选择预约用户姓名">
           <el-option
           v-for="item in userList"
           :key="item.uid"
           :label="item.username"
           :value="item.uid">
           </el-option>
         </el-select>
        </el-form-item>
        <el-form-item >
          <el-select v-model="appointment.addid" filterable placeholder="请选择预约地址">
            <el-option
            v-for="item in addressList"
            :key="item.addid"
            :label="item.address"
            :value="item.addid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
         <el-select v-model="appointment.addid" filterable placeholder="请选择疫苗">
           <el-option
           v-for="item in vaccinesList"
           :key="item.avcid"
           :label="item.avcname"
           :value="item.avcid">
           </el-option>
         </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFlag = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>

  </el-card>
</template>

<script>
  export default{
    data(){
      return {
        addFlag:false,
        editFlag:false,
        tableData:[],
        pager:{
          page:1,
          size:5,
          total:0
        },
        address:'',//根据预约地址进行查询
        addresss:{
          addid:0,
          address:'',
          detail:'',
          tel:''
        },
        username:'',
        appointment:{
          addid:'',
          appstats:'',
          avcid:'',
          money:'',
          remark:'',
          stats:'',
          uid:''
        },
        userList:[],
        vaccinesList:[],
        addressList:[]

      }
    },
    methods:{

      openAddDialog(){
        this.addFlag=!this.addFlag;
      },
      save(){
        this.$http.post('http://127.0.0.1/appointment/save',this.appointment)
        .then(res=>{
          if(res.data.code==200){
            this.$message({
              message: res.data.message,
              type: 'success'
            });
            this.editFlag = !this.editFlag;
            this.listPage();
            this.administators = {}
          }
        }).catch(e =>{
          this.$message.error('错了哦，服务器端未启动');
        })
      },
      update(row){
        this.appointment=row;
        this.$http.post('http://127.0.0.1/appointment/changeStats',this.appointment)
        .then(res=>{
          if(res.data.code==200){
            this.$message({
              message: res.data.message,
              type: 'success'
            });
            this.editFlag = !this.editFlag;
            this.listPage();
          }
        })
      },



      handleCurrentChange(val){
        console.info("改变分页起始数据"+val)
        this.pager.page=val;
        this.listPage()
      },
      handleSizeChange(val){
        console.info("改变每页显示的最大条数"+val)
        this.pager.size=val;
        this.listPage()
      },
      listPage(){
        this.$http.get('http://127.0.0.1/appointment/listPage',{
          params:{
            page:this.pager.page,
            size:this.pager.size,
            username:this.username
          }
        }).then(res=>{
          console.info(res);
          this.tableData = res.data.data.data;
          this.pager.total = res.data.data.count;
        })
      },
      listUsers(){
        this.$http.get('http://127.0.0.1/users/list').then(res=>{
          this.userList = res.data.data;

        }).catch(err=>{
          this.$message.error('错了哦，服务器端未启动');
        })
      },
      listVaccines(){
        this.$http.get('http://127.0.0.1/vaccines/list').then(res=>{
          this.vaccinesList = res.data.data;

        }).catch(err=>{
          this.$message.error('错了哦，服务器端未启动');
        })
      },
      listAddress(){
        this.$http.get('http://127.0.0.1/address/list').then(res=>{
          this.addressList = res.data.data;

        }).catch(err=>{
          this.$message.error('错了哦，服务器端未启动');
        })
      }
    },
    created(){
      this.listPage();
      this.listUsers();
      this.listVaccines();
      this.listAddress();
    }
  }
</script>

<style>
  .el-breadcrumb{
    padding-bottom: 12px;
  }
  .el-pagination{
    padding-top: 12px;
  }
</style>
